<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES6 迭代器 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES6 迭代器
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/09/14 22:04 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES6新特性</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<h2><a id="%E8%BF%AD%E4%BB%A3%E5%99%A8%E4%BB%8B%E7%BB%8D" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>迭代器介绍</h2>
<p>迭代器(<code>Iterator</code>)是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署<code>Iterator</code>接口，就可以完成遍历操作。</p>
<p><strong>注：</strong> <code>Iterator</code>接口就是对象上的<code>Symbol.iterator</code>属性</p>
<ol>
<li><code>ES6</code>创造了一种新的遍历命令<code>for...of</code>循环，<code>Iterator</code>接口主要供<code>for...of</code>消费</li>
<li>原生具备<code>Iterator</code>接口的数据
<ol>
<li><code>Array</code></li>
<li><code>Arguments</code></li>
<li><code>Set</code></li>
<li><code>Map</code></li>
<li><code>String</code></li>
<li><code>TypeArray</code></li>
<li><code>NodeList</code></li>
</ol>
</li>
</ol>
<h3><a id="%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>工作原理</h3>
<ol>
<li>创建指针对象，指向当前数据结构的起始位置</li>
<li>第一次调用对象的<code>next</code>方法，指针自动指向数据结构的第一个成员</li>
<li>不断调用<code>next</code>方法，指针一直往后移动，直到指向最后一个成员</li>
<li>每次调用<code>next</code>方法返回一个包含<code>value</code>和<code>done</code>属性的对象</li>
</ol>
<h4><a id="%E6%BC%94%E7%A4%BA" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>演示</h4>
<h5><a id="%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>代码片段</h5>
<pre class="line-numbers"><code class="language-js">const DSRTeam = ['卡夫','铃','四个八'];
let Iterator = DSRTeam[Symbol.iterator]();

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
</code></pre>
<h5><a id="%E8%BE%93%E5%87%BA%E7%BB%93%E6%9E%9C" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>输出结果</h5>
<pre class="line-numbers"><code class="language-js">{ value:&quot;卡夫&quot;, done:false }
{ value:&quot;铃&quot;, done:false }
{ value:&quot;四个八&quot;, done:false }
{ value:undefined, done:true }
</code></pre>
<h2><a id="%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%BA%94%E7%94%A8" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>迭代器应用</h2>
<p>用于自定义遍历数据</p>
<h3><a id="%E9%94%99%E8%AF%AF%E6%A1%88%E4%BE%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>错误案例</h3>
<pre class="line-numbers"><code class="language-js">//声明对象
const dsrteam = {
    name:&quot;一支训练有素的队伍&quot;,
    member:[
        '卡夫',
        '铃',
        '四个八'
    ]
}

//遍历对象
for(let v of dsrteam){
    console.log(v); //输出 dsrteam is not iterable
}
</code></pre>
<h3><a id="%E6%AD%A3%E7%A1%AE%E6%A1%88%E4%BE%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>正确案例</h3>
<pre class="line-numbers"><code class="language-js">//声明对象
const dsrteam = {
    name:&quot;一支训练有素的队伍&quot;,
    member:[
        '卡夫',
        '铃',
        '四个八'
    ],
    [Symbol.iterator](){
    //声明索引变量
        let index = 0;
        let _this = this;
        return {
            next: function(){
                if(index&lt;_this.member.length){
                   const result = { value: _this.member[i], done: false; };
                   index++;
                   return result;
                }else{
                    return{ value: undefined. done: true};
                }
            }
        };
    }
}

//遍历对象
for(let v of dsrteam){
    console.log(v); 
}
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>